/**
 * @description: 物业名称选择弹窗，仅适用于修缮和装修模块
 */
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="chooseVisible"
    custom-class="propertyChooseDialog"
    append-to-body
    width="600"
    @closed="handleClosed"
    :close-on-click-modal="false"
  >
    <div class="dialogWrap">
      <div class="chooseHeader">
        <el-input
          v-halfCharCode
          :placeholder="placeHolder"
          size="small"
          class="searchInput"
          v-model="searchValue"
          clearable
          @clear="clearSearch"
          @keyup.enter.native="confirmSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="confirmSearch"></el-button>
        </el-input>
        <el-button size="small" type="primary" @click="confirmChoose">确认选择</el-button>
      </div>

      <!-- 修缮问题反馈选择物业 -->
      <el-table ref="multipleTable" :data="tableData" max-height="640px" v-if="dialogType === 'question'">
        <el-table-column label="选择" width="55" align="left">
          <template slot-scope="scope">
            <el-radio class="propertyRadio" :label="scope.row.roomId" v-model="radioId" @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column header-align="left" label="物业名称" prop="propertyName" />
        <el-table-column align="left" label="建筑面积" width="140" prop="buildingArea" />
      </el-table>
      <!-- 预算管理选择物业 -->
      <el-table ref="multipleTable" :data="tableData" max-height="640px" v-if="dialogType === 'budget'"  	@selection-change="$event => (this.selectDataArr = $event)">
        <!--<el-table-column label="选择" width="55" align="left">
          <template slot-scope="scope">
            <el-radio class="propertyRadio" :label="scope.row.billId" v-model="radioId" @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
          </template>
        </el-table-column>-->

				<el-table-column label="选择" width="55">
					<template slot-scope="scope">
						<el-checkbox v-model="scope.row.checked"></el-checkbox>
					</template>
				</el-table-column>
        <el-table-column header-align="left" label="物业名称" prop="propertyName" />
        <el-table-column align="left" label="问题描述" width="140" prop="problemDesc" />
        <el-table-column align="left" label="上报时间" width="140" prop="initiateTime" />
        <el-table-column align="left" label="上报人" width="140" prop="initiator" />
      </el-table>
      <!-- 合同、结算、验收 [装修] -->
      <el-table ref="multipleTable" :data="tableData" max-height="640px" v-if="dialogType === 'accept' && dependentType === 'decorate'">
        <el-table-column label="选择" width="55" align="left">
          <template slot-scope="scope">
            <el-radio class="propertyRadio" :label="scope.row.billId" v-model="radioId" @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column header-align="left" label="工程名称" show-overflow-tooltip prop="engineeringName" />
        <el-table-column header-align="left" label="物业名称" prop="propertyName" />
        <el-table-column align="left" label="上报时间" width="140" prop="initiateTime" />
        <el-table-column align="left" label="上报人" width="140" prop="initiator" />
        <el-table-column align="left" label="装修说明" width="140" prop="problemDesc" />
      </el-table>
      <!-- 合同、结算、验收 [修缮] -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        max-height="640px"
        v-if="['accept','final-accounts'].includes(dialogType) && dependentType === 'repair'"
      >
        <el-table-column label="选择" width="40" align="left">
          <template slot-scope="scope">
            <el-radio class="propertyRadio" :label="scope.row.contractId" v-model="radioId" @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column header-align="left" width="150" label="工程名称" show-overflow-tooltip prop="engineeringName" />
        <el-table-column header-align="left" label="合同编号" prop="contractNumber" />
        <el-table-column header-align="left" label="审定金额" :formatter="priceFormatter" prop="approvalAmount" />
        <el-table-column header-align="left" label="施工单位" prop="unitName" />
        <el-table-column header-align="left" label="单位类型" prop="unitType">
          <template slot-scope="scope">{{getCompanyName(scope.row.unitType)}}</template>
        </el-table-column>
        <el-table-column header-align="left" label="物业名称" prop="propertyName" />
      </el-table>
      <!-- 付款管理 -->
      <el-table ref="multipleTable" :data="tableData" max-height="640px" v-if="dialogType === 'payment'">
        <el-table-column label="选择" width="55" align="left">
          <template slot-scope="scope">
            <el-radio class="propertyRadio" :label="scope.row.contractId" v-model="radioId" @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column header-align="left" label="工程名称" show-overflow-tooltip prop="engineeringName" />
        <el-table-column header-align="left" label="单位名称" prop="unitName" />
        <el-table-column header-align="left" label="合同金额" :formatter="priceFormatter" prop="totalAmount" />
        <el-table-column header-align="left" label="单位类型" prop="unitType">
          <template slot-scope="scope">{{getCompanyName(scope.row.unitType)}}</template>
        </el-table-column>
        <el-table-column header-align="left" label="物业名称" prop="propertyName" />
      </el-table>
      <!-- 合同录入【选择有中标公司的工程】 -->
      <el-table ref="multipleTable" :data="tableData" max-height="640px" v-if="dialogType === 'contract'">
        <el-table-column label="选择" width="55" align="left">
          <template slot-scope="scope">
            <el-radio class="propertyRadio" :label="scope.row.obtId" v-model="radioId" @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column align="left" label="工程名称" show-overflow-tooltip prop="engineeringName" />
        <el-table-column align="left" label="审定金额" :formatter="priceFormatter" prop="approvalAmount" />
        <el-table-column align="left" label="施工单位" prop="unitName" />
        <el-table-column align="left" label="单位类型" prop="unitType">
          <template slot-scope="scope">{{getCompanyName(scope.row.unitType)}}</template>
        </el-table-column>
        <el-table-column align="left" label="物业名称" prop="propertyName" />
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.current"
        :page-sizes="[3,20, 30, 50]"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        v-if="pageInfo.pages > 1"
      />
    </div>
  </el-dialog>
</template>

<script>
import { getPropertyList } from '@/views/wy-operate/api/repair'
import { mapState } from 'vuex'
export default {
  props: {
    //物业弹窗对应的模块
    dialogType: {
      type: String,
      default: 'question',
      validator: type => ['question', 'payment', 'contract', 'final-accounts', 'accept', 'budget'].includes(type)
    },
    // 所属模块
    dependentType: {
      type: String,
      default: 'repair',
      validator: type => ['repair', 'decorate'].includes(type)
    }
  },
  data () {
    return {
      // 弹窗控制器
      chooseVisible: false,
      // 物业列表信息
      tableData: [],
      // 列表请求参数
      params: {
        current: 1,
        size: 20,
      },
      // 分页信息
      pageInfo: {
        // 单页条数
        size: 20,
        // 当前页数
        current: 1,
        // 总条数
        total: 0,
        // 总页数
        pages: 0
      },
      radioId: '',
      // 选中的行
      templateSelection: {},
      // 搜索关键词
      searchValue: '',

			selectDataArr:[],//预算多选时的行
    };
  },
  computed: {
    ...mapState({
      // 公司类型列表
      companyDict: (state) =>
        state.dict.find((item) => item.type === "provider_type") || {
          children: [],
        },
    }),
    // 弹窗标题
    dialogTitle () {
      return {
        'question': '选择物业',
        'payment': '选择合同',
        'contract': '选择预算',
        'final-accounts': '选择工程',
        'accept': '选择工程',
        'budget': '选择问题物业'
      }[this.dialogType] || '选择物业'
    },
    // 搜索关键词key
    searchKey () {
      return {
        'question': 'propertyName',
        'payment': 'engineeringName',
        'contract': 'engineeringName',
        'final-accounts': 'engineeringName',
        'accept': 'engineeringName',
        'budget': 'propertyName'
      }[this.dialogType] || 'projectName'
    },
    // placeholder
    placeHolder () {
      return {
        'question': '请输入物业名称搜索',
        'payment': '请输入工程名称搜索',
        'contract': '请输入工程名称搜索',
        'final-accounts': '请输入工程名称搜索',
        'accept': '请输入工程名称搜索',
        'budget': '请输入物业名称搜索'
      }[this.dialogType] || '请输入物业名称搜索'
    }
  },
  methods: {
    // 获取物业列表数据
    init (params = {}) {
      let requestData = { ...this.params, ...params, [this.searchKey]: this.searchValue }
      getPropertyList(requestData, this.dialogType, this.dependentType).then(res => {
        const { current, size, total, records, pages } = res.data.data
        this.tableData = records.map(item => {
          if (typeof item.projectArea === 'number') {
            item.projectArea = item.projectArea.toFixed(2)
          }
          return item
        })
        this.params = requestData
        this.pageInfo = { current, size, total, pages }
      })
    },
    // 清除搜索
    clearSearch () {
      this.init({ [this.searchKey]: '', current: 1 })
    },
    //搜索事件
    confirmSearch () {
      this.init({ page: 1 })
    },
    // 物业点击事件
    getCurrentRow (row) {
      this.templateSelection = row
    },
    // 单页条数改变
    handleSizeChange (size) {
      this.init({ size })
    },
    // 页码改变
    handleCurrentChange (current) {
      this.init({ current })
    },
    // 弹窗开启
    show (type) {
      this.init()
      this.chooseVisible = true
    },
    // 弹窗关闭
    close () {
      this.chooseVisible = false
    },
    // 确定选择
    confirmChoose () {
    	//alert(JSON.stringify(this.selectDataArr))
      if (this.radioId!=null && this.radioId!="") {
				this.$emit('changeProperty', this.templateSelection)
				this.close()
      } else if(this.selectDataArr !=null && this.selectDataArr.length>0){
				this.$emit('changeProperty', this.selectDataArr)
				this.close()
      }
      else {
				this.$message.error(`请${this.dialogTitle}名称`)
			}


    },
    // 弹窗关闭初始化
    handleClosed () {
      this.tableData.length = 0
      this.params = { current: 1, size: 20 }
      this.pageInfo = { size: 20, current: 1, total: 0, pages: 0 }
      this.radioId = ''
      this.templateSelectio = {}
      this.searchValue = ''
    },
    // 获取公司单位类型
    getCompanyName (unitType) {
      let companyType = this.companyDict.children.find(item => item.value == unitType)
      return companyType ? companyType.label : ''
    }
  },
};
</script>

<style lang="scss" scoped>
.propertyChooseDialog {
  .chooseHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .searchInput {
      width: 240px;
      /deep/.el-input__inner {
        border-radius: 0;
      }
    }
  }
}
/deep/ .propertyRadio .el-radio__label {
  display: none;
}
</style>
